import React, { useState, useEffect } from "react";
import Tabbar from "@/components/Tabbar";
import NavBarDiv from '@/components/NavBar'
import './index.scss'
import { NoticeBar, Checkbox, Stepper, Button } from "antd-mobile";
import { fetchCart, updateCartNum, updateStatus, removeRecord } from "@/api/home";
export default function index() {
  // 控制删除按钮的出现
  const [deleteShow, setDelete] = useState(false)
  // 购物车总数量
  const [cartNum, setNum] = useState(0)
  // 购物车总价格
  const [cartPrice, setPrice] = useState(0)
  // 购物车数据
  const [cartData, setData] = useState([])
  // 获取购物车详情
  const getCart = () => {
    fetchCart().then(res => {
      // console.log(res);
      if (res.data.code === 0) {
        setNum(res.data.data.number)
        setPrice(res.data.data.price)
        setData(res.data.data.items)
      }
    })
  }
  // 改变商品数量
  const changeNum = (num: number, key: string) => {
    updateCartNum({
      key,
      number: num
    }).then(res => {
      if (res.data.code === 0) {
        setNum(res.data.data.number)
        setPrice(res.data.data.price)
        setData(res.data.data.items)
      }

    })
  }

  // 选中的状态
  const [allCheck, setCheck] = useState<boolean>()
  // 判断选中的状态
  const panduan = () => {
    let checkStatus = cartData.every((item: any) => item.selected)
    setCheck(checkStatus)

  }
  // 改变单个商品选中的转态
  const changeStatus = (value: boolean, key: string) => {
    updateStatus({
      key,
      selected: value
    }).then(res => {
      if (res.data.code === 0) {
        setNum(res.data.data.number)
        setPrice(res.data.data.price)
        setData(res.data.data.items)
      }
    })
  }
  // 改变全选的选中状态
  const changeAllStatue = (value: boolean) => {
    let keys: any[] = []
    cartData.map((item: any) => {
      keys.push(item.key)
    })
    updateStatus({
      key: keys.join(','),
      selected: value
    }).then(res => {
      if (res.data.code === 0) {
        setNum(res.data.data.number)
        setPrice(res.data.data.price)
        setData(res.data.data.items)
      }
    })
  }
  // 删除选中的商品
  const deleteCart = () => {
    let keys: any[] = []
    cartData.map((item: any) => {
      if (item.selected) {
        keys.push(item.key)
      }
    })
    removeRecord({
      key: keys.join(','),
    }).then(res => {
      if (res.data.code === 0) {
        setNum(res.data.data.number)
        setPrice(res.data.data.price)
        setData(res.data.data.items)
      }
      if (res.data.code === 700) {
        setNum(0)
        setPrice(0)
        setData([])
      }
    })
  }
  useEffect(() => {
    panduan()
  }, [cartData])
  useEffect(() => {
    getCart()
  }, [])
  return (
    <div className="cartZhengti">
      <NavBarDiv title="购物车" />
      <div className="cartMain">
        <NoticeBar content='自营商品实付满100元免运费，偏远地区满500免运费' color='alert' />
        <div className="cartHead">
          <div>购买数量</div>
          <div className="cartNum">{cartNum}</div>
          <div className="cartMsg" onClick={() => {
            setDelete(!deleteShow)
          }}>管理</div>
        </div>
        <div className="cartItems">
          {
            cartData.map((item: any) => (
              <div className="cartItem" key={item.goodsId}>
                <Checkbox checked={
                  item.selected
                } onChange={(value, key = item.key) => {
                  changeStatus(value, key)
                }}></Checkbox>
                <div className="itemImg">
                  <img src={item.pic} alt="" />
                </div>
                <div className="itemCot">
                  <p className="itemp">{item.name}</p>
                  <p className="itemPrice">{`￥${item.price}`}</p>
                  <Stepper
                    min={1}
                    defaultValue={item.number}
                    onChange={value => {
                      changeNum(value, item.key)
                    }}
                  />
                </div>
              </div>
            ))
          }

        </div>
        <div className="cartBottom">
          <Checkbox checked={
            allCheck
          } onChange={(value) => {
            changeAllStatue(value)
          }}>全选(<span style={{ color: 'red' }}>{cartNum}</span>)</Checkbox>
          <div>
            实付:
            <span style={{ color: 'red', fontSize: 15 }}>{`￥${cartPrice}`}</span>
          </div>
          {
            deleteShow ?
              <Button color='danger' onClick={deleteCart}>删除</Button> :
              <Button color='danger'>立即下单</Button>
          }

        </div>

      </div>
      <Tabbar />
    </div>
  );
}
